<script setup lang="ts">
// hooks
import debounce from '@/hooks/useDebounce';
// vue
import { defineEmits, ref } from 'vue';
const boxRef = ref()
const poxRef = ref()
const emits = defineEmits()
// 上拉触底函数
const scroll = debounce(() => {
  if (boxRef.value?.scrollTop + boxRef.value?.clientHeight >= poxRef.value?.offsetHeight - 10) {
    emits('onReachBottom')
  }
}, 800)
</script>
<!--
 可作为父容器
 将内容直接用组件标签包裹起来即可
 需要触底函数执行时可以在组件标签中使用 @onReachBottom="函数名" 触发函数
-->
<template>
  <div class="box" ref="boxRef" @scroll="scroll">
    <div class="pox" ref="poxRef">
      <slot></slot>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
  width: 100%;
  max-height: 100vh;
  overflow-y: scroll;
}
</style>
